<!--
 * @Author: Cenven
 * @Date: 2021-06-29 11:43:33
 * @Description: 北京泓深教育发展有限公司
 * @Descripttion: 
 * @version: @Lastest
 * @LastEditTime: 2021-07-01 15:10:42
 * @CopyRight: 北京泓深教育发展有限公司
-->
<template>
  <div class="menu_wrong_component">
    <div class="title">我的错题</div>
    <div class="circle_box">
      <i-circle :size="150" :percent="75" stroke-color="var(--theme-color)">
        <div class="circle-custom">
          <h1>{{wrongTotalNum}}</h1>
          <p>总题数</p>
        </div>
      </i-circle>
      <div class="wrong_btn_list">
        <div class="wrong_btn_item" @click="toPath('review')">错题回顾</div>
        <div class="wrong_btn_item" @click="toPath('wrong')">错题随练</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import {
  getQuestionBankWrongTotal,
  getQuestionBankWrong,
  getExamWrong,
  getSpecWrong
} from "~/api/v2-question-bank/question-bank.js";
export default {
  name: "menu_wrong_component",
  props: ["questionId"],
  components: {},
  data() {
    return {
      wrongTotalNum: 0
    };
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      token(state) {
        return state.token;
      },
      question_record_list(state) {
        return state.questionBank.question_record_list;
      },
      kl_md(state) {
        return state.kl_md;
      }
    })
  },
  watch: {},
  methods: {
    ...mapMutations([
      "SET_IS_LOADING",
    ]),
    /* 获取错题总量 */
    async getWrongNum() {
      this.SET_IS_LOADING(true);
      let result = await getQuestionBankWrongTotal({
        questionGroupId: this.questionId,
        userId: this.user_info.id
      });
      console.log("获取错题总量：", result);
      if (result && result.data && result.data.code == 200) {
        const { data } = result.data;
        this.wrongTotalNum = data;
        this.SET_IS_LOADING(false);
      } else {
        this.SET_IS_LOADING(false);
      }
    },
    toPath(type) {
      if(type == "wrong"){
        this.$router.push({
          path: "/question-test",
          query: {
            id: this.questionId,
            type: 4
          }
        });
      }else if(type == "review"){
        this.$router.push({
          path: "/question-test",
          query: {
            id: this.questionId,
            type: 4,
            review: 1
          }
        });
      }
     
    }
  },
  created() {
    this.getWrongNum();
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.menu_wrong_component {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 0px 20px 46px;
  background: #ffffff;
  .title {
    font-size: 18px;
    font-weight: bold;
    color: #5a5e66;
    border-bottom: 1px solid #e9edf5;
    line-height: 50px;
  }
  .circle_box {
    padding: 40px 0 30px;
    text-align: center;
    .circle-custom {
      h1 {
        color: #3f414d;
        font-size: 28px;
        font-weight: normal;
      }
      p {
        color: #657180;
        font-size: 16px;
        // margin: 10px 0 15px;
        margin-top: 10px;
      }
      span {
        display: block;
        padding-top: 15px;
        color: #657180;
        font-size: 14px;
        &:before {
          content: "";
          display: block;
          width: 50px;
          height: 1px;
          margin: 0 auto;
          background: #e0e3e6;
          position: relative;
          top: -15px;
        }
      }
      span i {
        font-style: normal;
        color: #3f414d;
      }
    }
    .wrong_btn_list {
      display: flex;
      justify-content: center;
      .wrong_btn_item {
        width: 100px;
        height: 34px;
        border-radius: 4px;
        border: solid 1px var(--theme-color);
        line-height: 34px;
        text-align: center;
        font-size: 14px;
        color: var(--theme-color);
        margin: 30px 40px 0;
        cursor: pointer;
      }
    }
  }
}
</style>
